<template>
  <div class="list">
        <div class="btn" >
            <span v-for="(item,index) in btnArr" :key="index" @click="handleClick(index)" :class="{active: currentIndex == index }">{{item}}</span>
        </div>
        <div v-if="page == 0">
        <div class="shop" v-for="(item,index) in list1" :key="index" >
            <div class="imgbox">
                <img :src="item.picture">
            </div>
            <div class="textbox">
                <div class="name">{{item.name}}</div>
                <div class="intro">{{item.promotion_info}}</div>
                <div class="bottom">
                    <div class="pricebox">
                        <span>爆爆团价</span>
                        <div class="price">
                            <div>￥<span class="money">{{item.min_price}}</span></div>
                            <div class="discount">{{item.discount}}折</div>
                        </div>
                    </div>
                    <div class="buy">
                        <div class="buy_q" @click="purchase(item,index)">{{item.lq?'已抢':'马上抢'}}</div>
                        <span>{{item.month_saled_content}}份</span>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div v-else>
        <div class="shop" v-for="(item,index) in list2" :key="index" >
            <div class="imgbox">
                <img :src="item.picture">
            </div>
            <div class="textbox">
                <div class="name">{{item.name}}</div>
                <div class="intro">{{item.promotion_info}}</div>
                <div class="bottom">
                    <div class="pricebox">
                        <span>爆爆团价</span>
                        <div class="price">
                            <div>￥<span class="money">{{item.min_price}}</span></div>
                            <div class="discount">{{item.discount}}折</div>
                        </div>
                    </div>
                    <div class="buy">
                        <div class="buy_q" @click="purchase(item,index)">{{item.lq?'已抢':'马上抢'}}</div>
                        <span>{{item.month_saled_content}}份</span>
                    </div>
                </div>
            </div>
        </div>
        </div>
    
  </div>
  
</template>

<script>
import {tuan_list} from '../../utils/api'

export default {
    data(){
        return {
            btnArr:['全部','待消费','待评价','退款'],
            page:0,
            list1:[],
            list2:[],
            currentIndex:0,
        }
    },
    methods:{
        purchase(item,index){
            item.lq = true;
        },
        handleClick(index){
            this.currentIndex = index;
            if(index == 0){
                this.page = 0;
            }else if(index == 1){
                this.page = 1;
            }
        },
    },
    mounted(){
        tuan_list({status:1}).then((res)=>{
            console.log(res.data);
            // res.data.list.push({lq:false});
            this.list1 = res.data.list;
            for(let i =0;i<this.list1.length;i++){
                this.list[i].lq = false;
            }
            console.log(this.list1);
        });
        tuan_list({status:0}).then((res)=>{
            console.log(res.data);
            this.list2 = res.data.list;
        });
    },
}
</script>

<style lang="scss" scoped>
.btn{
    display: flex;
    flex-direction:row;
    justify-content:flex-start;
}
.btn span{
    display: block;
    margin: 0 10px;
}
.btn span.active{
    color:#3cbdff;
}
.shop{
    padding: 10px;
    display: flex;
}
.shop .imgbox img{
    width: 100px;
    height: 100px;
}
.shop .textbox{
    margin-left: 10px;
}
.shop .textbox .name{
    font-size: 12px;
}
.shop .textbox .intro{
    font-size: 14px;
    font-weight: 600;
}
.shop .textbox .bottom{
    color: red;
    display: flex;
    justify-content: space-between;
}

.shop .textbox .bottom .pricebox span{
    font-size: 14px;
}
.shop .textbox .bottom .pricebox .price{
    display: flex;
}
.shop .textbox .bottom .pricebox .price .money{
    font-size: 20px;
}
.shop .textbox .bottom .pricebox .price .discount{
    border: 1px solid red;
    margin-left: 5px;
}
.shop .textbox .bottom .buy{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.shop .textbox .bottom .buy .buy_q{
    padding: 5px 20px;
    box-sizing: border-box;
    background-color: red;
    border-radius: 30px;
    color: #fff;
}

</style>